<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页模拟连接后端匹配数据</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/theme/default/layer.css" rel="stylesheet" />
    <style>
        .box {
            width: 500px;
            margin: 80px auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <form class="form-horizontal">
            <!-- 用户名 -->
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" autocomplete="off" placeholder="用户名" />
                </div>
            </div>
            <!-- 密码 -->
            <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" id="password" class="form-control" autocomplete="off" placeholder="密码" />
                </div>
            </div>
            <!-- 登陆按钮 -->
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="btn" class="btn btn-primary btn-block">
                        登录
                    </button>
                </div>
            </div>
        </form>
    </div>
    <!-- 引入第三方库样式 -->
    <script src="./js/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <!-- layer弹窗样式 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>

    <script>
        // 获取节点
        let usernameEle = document.getElementById('username');
        let pwdEle = document.getElementById('password');
        let btnEle = document.getElementById('btn');

        // 绑定单击事件
        btnEle.addEventListener('click', async () => {
            // 获取用户名和密码
            let username = usernameEle.value;
            let password = pwdEle.value;
            // axios发送post请求
            let { data } = await axios({
                method: 'post',
                url: 'http://192.168.218.1:5522/login',
                // 请求体参数
                data: {
                    // 对象简写
                    username,
                    password,
                },
            });
            let { message, code } = data;
            // 判断code并提示用户输入
            if (code === 20000) {
                layer.msg(message, { icon: 1 });
            } else {
                layer.msg(message, { icon: 2 });
            }
        });
    </script>
</body>

</html>